<template>
  <section class="main">
    <div class="title">
      <span>基本信息</span>
      <!-- <div>
        <el-button icon="el-icon-refresh"></el-button>
      </div> -->
    </div>
    <div class="container">
      <div class="itemBox">
        <div class="line">
          <div>账号</div>
          <div>{{username}}</div>
        </div>
        <div class="line">
          <div>昵称</div>
          <div>{{nickName}}</div>
        </div>
        <div class="line">
          <div>负责人邮箱</div>
          <div>{{email}}</div>
        </div>
      </div>
      <div class="itemBox">
        <div class="line">
          <div>角色名</div>
          <div>{{rolesName}}</div>
        </div>
        <div class="line">
          <div>负责人手机号</div>
          <div>{{phone}}</div>
        </div>
        <!-- <div class="line">
          <div>银行账号</div>
          <div>662364125641274127847</div>
        </div> -->
      </div>
    </div>
    <!-- 签约信息 -->
    <div class="title" v-if="rolesId == 5">
      <span>签约信息</span>
      <!-- <div>
        <el-button icon="el-icon-refresh"></el-button>
      </div> -->
    </div>
    <div class="container" v-if="rolesId == 5">
      <div class="itemBox">
        <div class="line">
          <div>结算周期</div>
          <div><span style="margin-right:10px">支付宝 {{aliSettlement}}</span> <span>微信 {{wxSettlement}}</span></div>
        </div>
        <div class="line">
          <div>使用中通道费率</div>
          <div>支付宝—— {{aliRate}}（万分比） 微信—— {{wxRate}}（万分比）</div>
        </div>
        <div class="line">
          <div>已开通项目</div>
          <div>{{project}}</div>
        </div>
      </div>
    </div>
    <!-- 通道成本 -->
    <div class="title" v-if="rolesId == 2 || rolesId == 3 || rolesId == 4">
      <span>通道成本</span>
      <!-- <div>
        <el-button icon="el-icon-refresh"></el-button>
      </div> -->
    </div>
    <div class="container" v-if="rolesId == 2 || rolesId == 3 || rolesId == 4">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        stripe
      >
        <el-table-column type="index" align="center" label="序号"></el-table-column>
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="channelName" align="center" label="通道名称"></el-table-column>
          <el-table-column prop="wxProfitRate" align="center" label="微信成本(万分比)">
            <template slot-scope="scope">
              <div>{{(scope.row.wxProfitRate)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="aliProfitRate" align="center" label="支付宝成本(万分比)">
            <template slot-scope="scope">
              <div>{{(scope.row.aliProfitRate)}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="银行卡成本">
            <template slot-scope="scope">
              <div>信用卡成本万分比：{{scope.row.creditcardProfitRate}}</div>
              <div>储蓄卡成本万分比：{{scope.row.debitcardProfitRate}}</div>
              <div>封顶费用（元）：{{scope.row.debitcardTopFee/100}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="结算比例">
            <template slot-scope="scope">
              <div>{{scope.row.percent}}%</div>
            </template>
          </el-table-column>
      </el-table>
    </div>
    <!-- 账户信息 -->
    <div class="title" v-if="isopenlimit">
      <span>账户信息</span>
    </div>
     <div class="container"  v-if="isopenlimit">
      <div class="accountinfoBox">
        <div class="item">
          <div class="accounttit">当前可用额度</div>
          <div class="accountval">{{limitinfo.sub_limit}}</div>
        </div>
        <div class="item">
          <div class="accounttit">当前总额度</div>
          <div class="accountval">{{limitinfo.all_limit}}</div>
        </div>
        <div class="item">
          <div class="accounttit">已使用额度</div>
          <div class="accountval">{{limitinfo.trade_limit}}</div>
        </div>
        <div class="item">
          <div class="accounttit">账户积分</div>
          <div class="accountval">{{limitinfo.point}}</div>
        </div>
        <div class="item">
          <el-button class="recharge" @click="jumprecharge" type="primary">立即充值</el-button>
        </div>
      </div>
    </div>
     <!-- 充值记录 -->
    <div class="title" v-if="isopenlimit">
      <span>充值记录</span>
    </div>
     <div class="tableBox" v-if="isopenlimit">
        <el-table
          ref="multipleTable"
          :data="chargeOrderPagelist"
          tooltip-effect="dark"
          style="width: 95%;margin: 0 auto;"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
          v-loading="loading"
        >
           <el-table-column type="index" align="center" label="序号"></el-table-column>
          <el-table-column prop="tradeTime" align="center" label="时间"></el-table-column>
          <el-table-column prop="tradeAmount" align="center" label="充值类型">
            <template slot-scope="scope">
              <div v-if="scope.row.type == 1">初始额度</div>
              <div v-if="scope.row.type == 2">扫码充值</div>
              <div v-if="scope.row.type == 3">手动提额</div>
            </template>
          </el-table-column>
         <el-table-column prop="tradeAmount" align="center" label="充值金额(元)">
            <template slot-scope="scope">{{(scope.row.tradeAmount/100).toFixed(2)}}</template>
          </el-table-column>
          <el-table-column prop="tradeRatio" align="center" label="充值比例(‰)">
           <template slot-scope="scope">{{(scope.row.tradeRatio/10).toFixed(1)}}</template>
          </el-table-column>
          <el-table-column prop="instLimitAdd" align="center" label="新增额度">
            <template slot-scope="scope">{{(scope.row.instLimitAdd/100).toFixed(2)}}</template>
          </el-table-column>
         
          <el-table-column fixed="right" align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="combined"
            :current-page.sync="cur_page"
          ></el-pagination>
        </div>
    </div>
  </section>
</template>

<script>
import {getPaymentList, getSignInfoMerchant,findUserInst,recharge,chargeOrderPage} from "@/api/api";
export default {
  data() {
    return {
      rolesId:'',
      fid:'',
      username:'',//账号
      email:'',//负责人邮箱
      nickName:'',//昵称
      rolesName:'',//角色名
      phone:'',//负责人手机号
      visible: false,
      tableData: [],
      aliRate:0,
      wxRate:0,
      aliSettlement:'',
      wxSettlement:'',
      availableChannels:'',
      project:'',
      rechargearr:[],
      multipleSelection:[],
      loading: false,
      combined:0,
      cur_page: 1,
      isopenlimit: false,
      limitinfo:'',
      chargeOrderPagelist:[]
    };
  },
  created(){
    this.getPermissions()
    if(this.rolesId == 2 || this.rolesId == 3 ||this.rolesId == 4){
      this.getPaymentList()
    }
    if(this.rolesId == 5){
      this.getSignInfoMerchant()
    }
    this.findUserInst()
  },
  methods:{
     //修改thead 背景色
     tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;'
      }
    },
    getPermissions(){
      var aaa = sessionStorage.getItem('userInfo')
      var bbb = JSON.parse(aaa)
      console.log(bbb)
      this.username = bbb.username
      this.nickName = bbb.nickName
      this.email = bbb.email
      this.rolesName = bbb.rolesName
      this.phone = bbb.phone
      this.rolesId = bbb.rolesId
      this.fid = bbb.fid
    },
    getPaymentList(){
      var type = null
      if(this.rolesId == 2){
        type = 1
      }else if(this.rolesId == 3){
        type = 2
      }else if(this.rolesId == 4){
        type = 3
      }
      getPaymentList({
        type: type,
        fid: this.fid
      }).then(res => {
        if(res.code == 405){
          sessionStorage. removeItem('token')
          this.$router.push('/login');
        }else if(res.code == 200){
          this.tableData = res.data
        }else if(res.code == 500){
          this.$message.error(res.message)
        }
      })
    },
    getSignInfoMerchant(){//签约信息
      getSignInfoMerchant({},this.fid).then(res => {
        console.log(res)
        if(res.code == 405){
          sessionStorage. removeItem('token')
          this.$router.push('/login');
        }else if(res.code == 200){
          this.aliRate = res.data.aliRate
          this.wxRate = res.data.wxRate
          this.aliSettlement = res.data.aliSettlement
          this.wxSettlement = res.data.wxSettlement
          this.project = res.data.project.join('、')
          // this.availableChannels = res.data.availableChannels.join('、')
        }else if(res.code == 500){
          this.$message.error(res.message)
        }
      })
    },
     handleSelectionChange(val) {
      this.multipleSelection = val;
    },
     // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.chargeOrderPage()
       this.$nextTick(() => {
         document.querySelectorAll('.content')[0].scrollTop = '0'
      });
    },
     // 分页数量
    sizechange(val){
      this.cur_size = val
      this.chargeOrderPage()
       
       this.$nextTick(() => {
         document.querySelectorAll('.content')[0].scrollTop = '0'
      });
       
    },
    // 查询额度
    findUserInst(){
       findUserInst({
         
        }).then(res => {
          console.log(res);
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
          }else if(res.code == 200){
            this.isopenlimit = true
            this.limitinfo = res.data
            this.chargeOrderPage()
          }
        });
    },
    // 充值列表
    chargeOrderPage(){
      chargeOrderPage({
         instNo:this.limitinfo.instNo,
         page: this.cur_page,
         size:this.cur_size,
        }).then(res => {
          console.log(res);
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
          }else if(res.code == 200){
            this.chargeOrderPagelist = res.data
            this.combined = res.pageInfo.recordCount;
          }
        });
    },
    // 跳充值
    jumprecharge(){
      this.$router.push("/recharge");
      sessionStorage.setItem('instNos',this.limitinfo.instNo);
      sessionStorage.setItem('limitMul',this.limitinfo.limitMul);
      sessionStorage.setItem('limitRatio',this.limitinfo.limitRatio);
      
    }
   
  }
};
</script>

<style scoped  lang="less">
.title {
  background: #fff;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.container {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.container .itemBox {
  width: 50%;
}
.container .itemBox .line {
  width: 100%;
  display: flex;
  font-size: 14px;
  line-height: 200%;
}
.container .itemBox .line div:nth-child(1) {
  width: 20%;
  text-align: left;
}
.container .itemBox .line div:nth-child(2) {
  width: 80%;
  text-align: left;
  color: #888888;
}
.container .accountinfoBox{
  width: 100%;
  display: flex;
  align-items: center;
  .item{
    width: 20%;
    text-align: center;
    .accountval{
      color: #2E71D9;
      font-size: 22px;
    }
  }
  .recharge{
    width: 70%;
  }
  
}
.tableBox{
    width: 100%;
    background: #fff;
  }
</style>
